<include file="public/head" />
</head>
<body>
<div class="am-modal am-modal-alert" tabindex="-1" id="fq_alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_alert_title"></div>
    <div class="am-modal-bd" id="fq_alert_info">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="fq_confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_confirm_title"></div>
    <div class="am-modal-bd" id="fq_confirm_info"></div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm="">确定</span>
    </div>
  </div>
</div>

<script src="__STATIC__/itaoke/mobile/js/lArea.min.js"></script>

<!-- modal start -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="fq_true_confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd" id="fq_true_confirm_title"></div>
        <div class="am-modal-bd" id="fq_true_confirm_info"></div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel="">取消</span>
            <span class="am-modal-btn" data-am-modal-confirm="">确定</span>
        </div>
    </div>
</div>
<!-- modal end -->
<!--已有地址-->
<!--默认地址-->
<header style="position:relative;z-index:999;background:#F54D23;">
    <a href="javascript:void(0);" onclick="back();" style="position:absolute;top:2px;color:#fff;width:45px;height:100%;padding-left:10px;font-size:25px;" class="am-inline-block am-text-middle am-icon-angle-left"><!-- <img src="/Public/assets/mobile/images/left.png" />--></a><div class="am-per-center am-text-center am-padding-vertical-sm" style="color:#fff;font-size:16px;">管理收货地址</div>
</header>

<script>
    function back(){
       var last_page_url = (document.referrer);
       if(last_page_url){
          	window.history.back();
		}else{
			window.location.href ='{:U('User/index')}';
		}
    }
</script>

<div class="am-padding-vertical-xs manage_content" style="margin-bottom:4rem;">
    <div class="am-inline-block add-first am-text-sm am-padding-horizontal-sm am-padding-vertical-xs am-margin-bottom-xs" style="width: 100%;">
        <p><i class="am-icon-bullhorn" style="margin-left: 2px;font-size: 16px;margin-right: 2px;"></i> <span class="am-text-danger">最多设置{:C('itk_user_max_address')}个收货地址哦!</span></p>
    </div>
    <volist name="alladdress" id="vo">
       <div class="am-inline-block add-first am-text-sm am-padding-horizontal-sm am-padding-vertical-xs " style="width: 100%;">
            <span class=" am-fl am-name name{$vo.id}">{$vo.username}</span>
            <span class=" am-fr am-number phone{$vo.id}">{$vo.phone}</span>
            <span class=" am-fl am-add am-padding-top-xs " style="clear: both"><span class="am-selection am-text-danger"><if condition="$vo.ison eq 1">[默认地址]</if></span><span class="add_show{$vo.id}">{$vo.address}</span></span>
            <div class=" am-fl am-margin-top-sm choice_default" style="clear: left;color:#8f8f8f">
                <label class="am-radio am-margin-vertical-0">
                  <input type="radio" class="am-operation default_id am-ucheck-radio" name="doc-radio-1" value="{$vo.id}" style="width:14px; height:14px; position:relative; top:2px;" data-am-ucheck="" <if condition="$vo.ison eq 1">checked=""</if>>
                  <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>
                  <span class="selected_address <if condition="$vo.ison eq 1">am-text-danger</if>">默认地址</span>
                </label>
            </div>
            <div class=" am-fr am-margin-top-sm operate">
                <a class="am-edit am-operation" data-id="{$vo.id}">
                    <span>编辑</span>
                </a>
                <a class="am-margin-left-sm am-operation del key{$vo.id}" data-id="{$vo.id}" data-key="<if condition="$vo.ison eq 1">1</if>">
                    <span>删除</span>
                </a>
            </div>
        </div>
        <div class="edit_text{$vo.id}"></div>
     </volist>
   
     
    <!--编辑展开-->

    <div class="am-padding-vertical-sm am-padding-left-sm am-margin-bottom-xs" id="am-edit-details" style="display: none;">
        <div class="am-edittitle am-text-default am-padding-left-sm  am-inline-block"><strong>编辑收货人信息</strong></div>
        <a class="am-keep am-inline-block am-fr am-margin-right-sm am-padding-horizontal-sm am-text-sm" style="border: .1rem solid #f3e7e3">关闭</a>
        <div class="am-newly am-vertical-align am-text-sm">
            收货人姓名：<input type="text" class="consignee_name" name="consignee_name" value="">
        </div>

        <div class="am-newly am-vertical-align am-text-sm">
            手机号码：<input type="text" class="consignee_phone" name="consignee_phone" value="">
        </div>
        <div class="am-address am-vertical-align am-text-sm">
            <div class="am-margin-top-sm am-margin-top-sm am-inline-block">收货地址： </div>
            <textarea class="am-margin-top-xs am-padding-top-xs" rows="2" id="Textarea1" name="consignee_address" value=""></textarea>
        </div>

        <div class="am-text-center am-margin-top">
                <a class="am-margin-top am-radius am-padding-vertical-xs am-padding-horizontal" id="edit_sub" data-id="" style="background: #f54d23; color: white">保存</a>
        </div>
    </div>

    <!--新增按钮-->
    <div class="am-new">
        <!--新增按钮-->
        <div class=" am-added am-text-center am-padding-vertical-sm am-padding-left-sm ">
            <a class="am-inline-block">
                <i class="am-icon-plus-circle am-icon-md am-margin-right-xs"></i>
                新增收货人信息
            </a>
        </div>
        <!--展开详情-->
        <div class="am-details  am-padding-left-sm am-padding-top-sm">
            <div class="am-newlytitle am-text-default am-padding-left-sm  am-inline-block"><strong>新增收货人信息</strong></div>
            <a class="am-cancel am-inline-block am-fr am-margin-right-sm am-padding-horizontal-sm am-text-sm" style="border: .1rem solid #f3e7e3">关闭</a>
            <div class="am-newly am-vertical-align am-text-sm">
                收货人姓名：<input type="text" class="add_name" name="add_name">
            </div>
            <div class="am-newly am-vertical-align am-text-sm">
                手机号码： <input type="text" class="add_phone" name="add_phone">
            </div>
			<div class="am-newly am-vertical-align am-text-sm" id="city">
                所在地区：<input id="area" type="text" readonly="" name="input_area" placeholder="请选择城市">
            </div>
            <div class="am-address am-vertical-align am-text-sm">
                <div class="am-margin-top-sm am-margin-top-sm am-inline-block">详情地址： </div>
                <textarea class="am-margin-top-xs am-padding-top-xs" rows="2" id="add_detail" name="add_detail" value=""></textarea>
            </div>
            <div class="am-text-center am-padding-bottom am-margin-top ">
                <button class="am-btn am-margin-top-sm am-radius am-padding-vertical-xs am-padding-horizontal myitem_sub" style="background: #f54d23; color: white">保存地址</button>
            </div>
        </div>
    </div>
 <include file="public/foot" />
    <style>
        body {
            font-size: 1.4rem;
            color: #3d0505;
            background: #f3f3f3;
        }
        .add-first {
            background: white;
        }

        a {
            color: #3d0505;
        }

            a:hover, a:focus {
                color: #8f8f8f;
            }

        .am-add,
        .am-operation {
            color: #8f8f8f;
        }

            .am-operation img {
                position: relative;
                top: -2px;
                width: 16px;
                height: 16px;
            }



        .am-receive,
        .am-receipt,
        .am-new,
        #am-edit-details {
            background: white;
        }
        .am-phone {
            line-height: 2;
        }
        .am-address,
        .am-newly,
        .am-first,
        .am-text {
           color: #8f8f8f;
        }
        .am-newly {
            height: 40px;
            border-bottom: .1rem solid #f3e7e3;
        }
            .am-newly input {
                color: #3d0505;
                line-height: 2;
                border: none;
            }
            .am-newly a {
                padding-top: 9px;
                padding-bottom: 9px;
            }

        .am-newlytitle,
        .am-edittitle {
            border-left: .3rem solid #f54d23;
        }

        select {
            border: 0;
        }

        textarea {
            color: #3d0505;
            width: 70%;
            border: 0;
            resize: none;
        }
        .am-details {
            display: none;
        }
        .am-icon-plus-circle,
        .am-exchange {
            color: #f54d23;
        }
        .am-exchange,
        .am-command,
        .am-text {
           width: 95%;
            height: 36px;
        }
        .am-exchange a {
                color: white;
                position: relative;
                top: 1px;
         }
        radio :checked {
            border:.1rem solid #3d0505;
        }

        radio:checked {
            background:#f54d23;
        }
        .am-pagination > .am-active > a{
           background-color: #f54d23;
           border-color: #f54d23;
       }

       /*地区联动样式*/
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }

    .gearArea{
        background-color: rgba(0,0,0,0.2);
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9900;
        overflow: hidden;
        -webkit-animation-fill-mode: both;
    }

    .area_ctrl {
        vertical-align: middle;
        background-color: white;
        margin: 0;
        height: auto;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 9901;
        overflow: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .slideInUp {
        animation: slideInUp .3s ease-in;
        -webkit-animation: slideInUp .3s ease-in;
    }

    @-webkit-keyframes slideInUp {
        from {
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }

        to {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .area_roll {
        display: -webkit-box;
        width: 100%;
        height: auto;
        overflow: hidden;
        font-weight: bold;
        background-color: transparent;
        -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36,142,36,0)));
        -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36,142,36,0));
    }

        .area_roll > div {
            height: 8em;
            float: left;
            background-color: transparent;
            position: relative;
            overflow: hidden;
            -webkit-box-flex: 1;
        }
    .area_roll_mask {
        -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36,142,36,0)));
        -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36,142,36,0));
        padding: 0 0 3em 0;
    }

    .area_grid {
        position: relative;
        top: 4em;
        width: 100%;
        height: 2em;
        margin: 0;
        box-sizing: border-box;
        z-index: 0;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }

    .area_roll > div:nth-child(3) .area_grid > div {
        left: 42%;
    }

    .area_btn {
        text-align: center;
        padding: .8em 1em;
        cursor: pointer;
    }

    .area_btn_box {
        display: -webkit-box;
        -webkit-box-pack: justify;
        -webkit-box-align: stretch;
    }

    .gear {
        float: left;
       position: absolute;
        z-index: 9902;
        width: 5.5em;
        margin-top: 4em;
    }
    .area_roll > div .gear {
        width: 100%;
    }

    .tooth {
        height: 2em;
        line-height: 2em;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /*完结*/
    </style>
    <script>
        //取消编辑按钮
        $(".am-cancel").click(function () {
            $(".am-details").css("display", "none");
            $(".am-added").css("display", "block");
        })
        //点击新增收货人信息

        $(".am-added").click(function () {
            $(".am-added").css("display", "none");
            $(".am-details").css("display", "block");
        })

        $(".manage_content").on('click','.am-edit',function () {           
            var edit=$(this);
            var id=edit.attr("data-id");
            $('.edit_text'+id).html($("#am-edit-details"));
            $("#am-edit-details").css("display", "block");
            var name=$('.name'+id).text();
            var phone=$('.phone'+id).text();
            var address=$(".add_show"+id).text();
            $(".consignee_name").val(name);
            $(".consignee_phone").val(phone);
            $("#Textarea1").val(address);
            $("#edit_sub").attr("data-id",id);
        });

       
        $(".manage_content").on('click','.am-keep',function () {
            $("#am-edit-details").hide();
        });

        var area = new lArea();
        area.init({
            'trigger': '#area',//控件ID
            'data': lAreaData//数组格式数据源，可扩展为自定义数据源
        });

        //选择默认地址
        $('.manage_content').on('click','.choice_default',function(){
            var check=$(this);
            var id=check.find('.default_id').val();
            check.find('.selected_address').append(' <i class="am-icon-spinner am-icon-spin"></i>');
            $.ajax({
                type: 'post',
                url: "{:U('User/setdefault')}",
                data: { "id":id},
                dataType: 'json',
                success: function (data) {
                    if (data.status == 1) {
                        $("#fq_alert_info").html("设置默认地址成功");
                        $('#fq_alert').modal();
                        $('.am-selection').html("");
                        $('.choice_default').removeAttr('checked');
                        $('.del').attr("data-key",'');
                        check.find('.default_id').prop("checked", true);
                        $(".add_show"+id).before('<span class="am-selection am-text-danger">[默认地址]</span>');
                        check.find('.selected_address').html('默认地址');
                        $('.selected_address').removeClass('am-text-danger');
                        check.find('.selected_address').addClass('am-text-danger');
                        $(".key"+id).attr("data-key","1");
                    }else{
                        $("#fq_alert_info").html("设置失败");
                        $('#fq_alert').modal();
                        check.find('.selected_address').html('默认地址');
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(XMLHttpRequest.status == 200){
                    }else{
                        $('#fq_alert_info').text('网络连接超时！');
                        $('#fq_alert').modal({});
                        check.find('.selected_address').html('默认地址');
                    }
                }
            });
        });

        //删除收货地址
        $('.operate').on('click','.del',function(){
            $("#fq_true_confirm_info").text("亲，您确定要删除该地址吗？");
            $('#fq_true_confirm').modal({
                relatedTarget: this,
                onConfirm: function () {
                    var remove=$(this.relatedTarget);
                    var id=remove.attr("data-id");
                    var key=remove.attr("data-key");//判断是否为已设置为默认地址的
                    if(key==1){
                        del_default=1;
                    }else{
                        del_default=0;
                    }  
                    $.ajax({
                        type: 'post',
                        url: "{:U('User/deladdress')}",
                        data: { "id":id,'del_default':del_default},
                        dataType: 'json',
                        success: function (data) {
                            if (data.status == 1) {
                                remove.parent().parent().remove();                                
                                var len=$('.del').length;
                                if(len<10){
                                   $('.am-added').removeClass('am-hide'); 
                                }
                                if(len<=0 || data.data.key==1){
                                    $("#fq_confirm_info").html(data.data.msg);
                                    $('#fq_confirm').modal({
                                        closeViaDimmer:false,
                                        onConfirm: function(options) {
                                             window.location.href = "{:U('User/maddress')}";
                                        },
                                    });
                                }else{
                                    $("#fq_alert_info").html(data.data.msg);
                                    $('#fq_alert').modal();
                                }                               
                            }else{
                                $("#fq_alert_info").html(data.data.msg);
                                $('#fq_alert').modal();
                            }
                        },
                        complete:function(XMLHttpRequest,status){
                            if(XMLHttpRequest.status == 200){
                            }else{
                                $('#fq_alert_info').text('网络连接超时！');
                                $('#fq_alert').modal({});
                            }
                        }
                    });
                },
            });

        });

        //新增收货人信息
        $('.myitem_sub').click(function(){
            var name=$.trim($('.add_name').val());
            var phone=$.trim($('.add_phone').val());
            var area=$.trim($('#area').val()).replace(/\s+/g, "");
            var detail=$.trim($('#add_detail').val());
            var address=area+detail;
            if (name == '') {
                $("#fq_alert_info").html("亲，请输入收货人姓名哦");
                $('#fq_alert').modal();
                return false;
            }
            if (phone == '') {
                $("#fq_alert_info").html("亲，请输入收货人号码哦");
                $('#fq_alert').modal();
                return false;
            }
            if (!(/^1[3|4|5|7|8]\d{9}$/.test(phone))) {
                $("#fq_alert_info").html("亲，请输入正确的手机号哦");
                $('#fq_alert').modal();
                return false;
            }
            if (area == '') {
                $("#fq_alert_info").html("亲，请选择所在城市哦");
                $('#fq_alert').modal();
                return false;
            }

            if (detail == '') {
                $("#fq_alert_info").html("亲，请输入详细地址哦");
                $('#fq_alert').modal();
                return false;
            }
            $('.myitem_sub').prop('disabled', true);
            $('.myitem_sub').html('提交中 <i class="am-icon-spinner am-icon-spin"></i>');
            $.ajax({
                type: 'post',
                url: "{:U('User/address')}",
                data: {'consignee_name':name, 'consignee_phone':phone, 'consignee_address':address},
                dataType: 'json',
                success: function (data) {
                    if (data.status == 1) {
                        $('.myitem_sub').html('保存地址');
                        $("#fq_confirm_info").text(data.data.msg);
                        $('#fq_confirm').modal({
                            relatedTarget: this,
                            onConfirm: function () {
                                 location.reload();
                             },
                        });                                    
                    }else{
                        $("#fq_alert_info").html(data.data.msg);
                        $('#fq_alert').modal();
                        $('.myitem_sub').html('保存地址');
                        $('.myitem_sub').prop('disabled', false);
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(XMLHttpRequest.status == 200){
                    }else{
                        $('#fq_alert_info').text('网络连接超时！');
                        $('#fq_alert').modal({});
                        $('.myitem_sub').html('保存地址');
                        $('.myitem_sub').prop('disabled', false);
                    }
                }
            });
        });

        //保存编辑内容
        $('#edit_sub').click(function(){
            var id='';
            var new_name=$(".consignee_name").val();
            var new_phone=$(".consignee_phone").val();
            var new_area=$("#Textarea1").val();
            id=$('#edit_sub').attr("data-id");
            $('.edit_sub').html('保存中 <i class="am-icon-spinner am-icon-spin"></i>');
            $.ajax({
                type: 'post',
                url: "{:U('ediaddress')}",
                data: {'consignee_name':new_name, 'consignee_phone':new_phone, 'consignee_address':new_area,'id':id},
                dataType: 'json',
                success: function (data) {
                    if (data.status == 1) {
                        $("#fq_alert_info").html("修改成功");
                        $('#fq_alert').modal();
                        $('.name'+id).html(new_name);
                        $('.phone'+id).html(new_phone);
                        $('.add_show'+id).html(new_area);
                        $('.edit_sub').html('保存');
                        $('.edit_sub').prop('disabled', false);
                        $("#am-edit-details").css("display", "none");               
                    }
                    if (data.status == 0) {
                        $("#fq_alert_info").html("修改失败，稍后再试！");
                        $('#fq_alert').modal();
                        $('.edit_sub').html('保存');
                        $('.edit_sub').prop('disabled', false);
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(XMLHttpRequest.status == 200){
                    }else{
                        $('#fq_alert_info').text('网络连接超时！');
                        $('#fq_alert').modal({});
                        $('.edit_sub').html('保存');
                        $('.edit_sub').prop('disabled', false);
                    }
                }
            });
        });
    </script>
<div class="am-hide"></div>
</div>
</body>
</html>